<template>
  <div v-for="followVO in followVOList" :key="followVO.id"
       class="user-item"
       style="display: flex; align-items: center; justify-content: space-between; height: 56px">
    <div style="display: flex; align-items: center; justify-content: center; margin-left: 12px">
      <van-image
          round
          width="3rem"
          height="3rem"
          :src="processImageUrl(followVO.avatarUrl)"
          style="margin-top: 20px; margin-bottom: 20px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4)"
      />
      <span class="username" style="margin-left: 12px; color: #999999">{{ followVO.username }}</span>
    </div>
    <van-button v-if="!followVO.isFollowed" type="primary" style="margin-right: 20px"
                @click="addFollow(followVO.id, followVO.isFollowed)">关注
    </van-button>
    <van-button v-else type="success" style="margin-right: 20px"
                @click="deleteFollow(followVO.id, followVO.isFollowed)">取关
    </van-button>
  </div>
  <van-divider/>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import {FollowVOType} from "../models/followVO";
import { processImageUrl } from '../utils/imageUtils';
import myAxios from '../plugins/myAxios';
import { showToast } from 'vant';

interface FollowCardList {
  followVOList: FollowVOType[];
  loading?: boolean;
}

// 带有默认值的props定义
withDefaults(defineProps<FollowCardList>(), {
  loading: true,
});

// 定义emit事件
const emit = defineEmits(['update-follow-status']);

const processingIds = ref<Set<number>>(new Set());

const addFollow = async (userId: number, isFollowed: boolean) => {
  if (processingIds.value.has(userId)) {
    return;
  }
  
  processingIds.value.add(userId);
  
  try {
    if (isFollowed) {
      showToast('已经关注过该用户');
      return;
    }
    
    const res = await myAxios.post('/follow/add', {
      userId,
      isFollowed: false
    });
    
    if (res?.code === 0) {
      showToast('关注成功');
      // 通知父组件更新关注状态
      emit('update-follow-status', userId, true);
    } else {
      showToast(res?.description ?? '关注失败');
    }
  } catch (error) {
    // 将捕获的错误封装为标准Error对象
    const followError = error instanceof Error 
      ? error 
      : new Error('关注操作失败: ' + (error ? String(error) : '未知错误'));
    
    console.error('关注操作失败:', followError);
    showToast('操作失败，请稍后再试');
  } finally {
    processingIds.value.delete(userId);
  }
};

const deleteFollow = async (userId: number, isFollowed: boolean) => {
  if (processingIds.value.has(userId)) {
    return;
  }
  
  processingIds.value.add(userId);
  
  try {
    if (!isFollowed) {
      showToast('尚未关注该用户');
      return;
    }
    
    const res = await myAxios.post('/follow/delete', {
      userId,
      isFollowed: true
    });
    
    if (res?.code === 0) {
      showToast('取消关注成功');
      // 通知父组件更新关注状态
      emit('update-follow-status', userId, false);
    } else {
      showToast(res?.description ?? '取消关注失败');
    }
  } catch (error) {
    // 将捕获的错误封装为标准Error对象
    const unfollowError = error instanceof Error 
      ? error 
      : new Error('取消关注操作失败: ' + (error ? String(error) : '未知错误'));
      
    console.error('取消关注操作失败:', unfollowError);
    showToast('操作失败，请稍后再试');
  } finally {
    processingIds.value.delete(userId);
  }
};
</script>

<style scoped>
.user-item {
  transition: background-color 0.3s;
}
.user-item:hover {
  background-color: #f5f5f5;
}
.username {
  font-weight: 500;
}
</style>

